
import React, { PureComponent } from 'react'
import { Row, Col, Button } from 'antd';
import { connect } from 'react-redux'
import PageBackHeader from "@common/PageBackHeader";
import WarehouseInventoryGoodsChoose from "@components/warehouse/WarehouseInventoryGoodsChoose";
import { withRouter } from 'react-router-dom'
import { creatInventoryDraft, submitInventoryInfo } from "@sagas/warehouse/stockManagement";
import { WarehouseSelect } from '@components/warehouse/WarehouseSelect'
import notify from "@utils/tip";
import { getHistoryMatchParams } from "@utils/setUrlQuery";
function mapStateToProps(state) {
    const { warehouseManagement } = state
    return {
        warehouseSelection: warehouseManagement.warehouseSelection,
    }
}
const reFormat = (data) => {
    const dataArr = (data || []).map((item, index) => ({
        ...item,
        name: item.remark.name,
        prod_type_name: item.remark.type,
    }))
    return dataArr
}
@connect(
    mapStateToProps
    , {
        creatInventoryDraft,
        submitInventoryInfo
    })
@withRouter
class CheckInventory extends PureComponent {

    constructor(props) {
        super(props);
        const { location } = props
        const { id } = getHistoryMatchParams(props)
        const { state } = location
        this.state = {
            order_number: id,
            warehouseId: '',
            goodsItems: id ? reFormat(state.data) : []
        }

        this.cancelFunc = this.cancelFunc.bind(this)
    }

    submitForm(isSubmitted) {
        const { goodsItems, warehouseId, order_number } = this.state
        const { submitInventoryInfo, creatInventoryDraft } = this.props
        const createParams = {
            id: warehouseId,
            isSubmitted,
        }
        if (!goodsItems.length) {
            notify('请添加商品', 'error')
            return
        }
        createParams.data = goodsItems.map(o => {
            return {
                storage_key: o.storage_key,
                storage_type: 2,
                input_quantity: o.input_quantity,
            }
        })
        if (goodsItems.some(item => typeof (item.input_quantity) === 'undefined' || item.input_quantity === '')) {
            notify('请填写数量', 'error')
            return
        }
        if (order_number) {
            createParams.orderNumber = order_number
            creatInventoryDraft(createParams, () => {
                notify('提交成功', 'success')
                this.cancelFunc()
            })
        } else {
            submitInventoryInfo(createParams, () => {
                notify('提交成功', 'success')
                this.cancelFunc()
            })
        }
    }

    cancelFunc() {
        this.props.goBack ? this.props.goBack() : this.props.history.goBack()
    }

    handleIdChange(value) {
        this.setState({
            warehouseId: value
        })
    }

    onValueChange(value) {
        this.setState({
            goodsItems: value
        })
    }

    render() {
        const { warehouseId, goodsItems } = this.state
        return (
            <div className="bilin-web">
                <PageBackHeader title='新建盘点单' />
                <div className="bilin-web-body with-footer">
                    <div className="warehouse-check-inventory-page">
                        <Row className="check-line">
                            <Col span={4}>
                                <span className='ft-clr-d'>盘点仓库:</span>
                            </Col>
                            <Col span={18}>
                                <WarehouseSelect
                                    width='720px'
                                    value={warehouseId}
                                    onChange={this.handleIdChange.bind(this)}
                                />
                            </Col>
                        </Row>
                        <WarehouseInventoryGoodsChoose value={goodsItems || []} onChange={this.onValueChange.bind(this)} />
                    </div>
                </div>
                <div className="bilin-web-footer">
                    <Button type="primary" onClick={this.submitForm.bind(this, true)}>完成盘点</Button>
                    <Button type="primary" onClick={this.submitForm.bind(this, false)}>保存草稿</Button>
                    <Button type="primary" ghost onClick={this.cancelFunc}>取消</Button>
                </div>
            </div>

        )
    }
}

export default CheckInventory